<script setup lang="ts">
import FeatureLayer from '@arcgis/core/layers/FeatureLayer.js'
import Map from '@arcgis/core/Map.js'
import MapView from '@arcgis/core/views/MapView.js'
import { onMounted } from 'vue'
import { ref } from 'vue'

// 地图容器
const mapViewContainer = ref<HTMLDivElement>()
const lineData = new FeatureLayer({
  url: 'https://services8.arcgis.com/CmXfu09loK81if9H/arcgis/rest/services/DeepseekDesignCityFeaturelayer/FeatureServer/1',
  outFields: ['*'],
  renderer: {
    type: 'simple',
    symbol: {
      type: 'simple-line',
      color: [0, 0, 255, 0.5], // 蓝色，50%透明度
      width: '2px',
    },
  } as never,
  labelingInfo: [
    {
      symbol: {
        type: 'text',
        color: 'black',
        haloColor: 'white',
        haloSize: 1,
        font: {
          size: 12,
          weight: 'normal',
        },
      },
      labelPlacement: 'above-center',
      labelExpression: '[name]',
      maxScale: 0,
      minScale: 25000,
      where: 'name IS NOT NULL',
    },
  ],
})

const shapeData = new FeatureLayer({
  url: 'https://services8.arcgis.com/CmXfu09loK81if9H/arcgis/rest/services/DeepseekDesignCityFeaturelayer/FeatureServer/2',
  outFields: ['*'],
  renderer: {
    type: 'simple',
    symbol: {
      type: 'simple-fill',
      color: [255, 255, 0, 0.3], // 黄色，70%透明度
      outline: {
        color: [255, 255, 0, 0.8],
        width: '1px',
      },
    },
  } as never,
  labelingInfo: [
    {
      symbol: {
        type: 'text',
        color: 'black',
        haloColor: 'white',
        haloSize: 1,
        font: {
          size: 12,
          weight: 'normal',
        },
      },
      labelPlacement: 'always-horizontal',
      labelExpression: '[name]',
      maxScale: 0,
      minScale: 25000,
      where: 'name IS NOT NULL',
    },
  ],
})

const pointData = new FeatureLayer({
  url: 'https://services8.arcgis.com/CmXfu09loK81if9H/arcgis/rest/services/DeepseekDesignCityFeaturelayer/FeatureServer/0',
  outFields: ['*'],
  renderer: {
    type: 'simple',
    symbol: {
      type: 'simple-marker',
      size: 6,
      color: [255, 0, 0, 0.7], // 红色，30%透明度
      outline: {
        color: [255, 255, 255],
        width: 1,
      },
    },
  } as never,
})
//初始化地图
const map = new Map({
  basemap: {
    style: {
      id: 'osm/streets',
      language: 'zh-CN',
    },
    referenceLayers: [],
  },
})

//添加图层
map.addMany([lineData, shapeData, pointData])

//初始化mapview
const view = new MapView({
  map: map,
  center: [110.641855, 26.73], // Longitude, latitude
  zoom: 13, // Zoom level
})

//待dom元素完成后加入
onMounted(async () => {
  view.container = mapViewContainer.value!
})
</script>

<template>
  <div id="mapViewContainer" ref="mapViewContainer" class="mapView"></div>
</template>
